/*
 * ------------------------------------------------------------------------
 * mdmdt-light.css
 * (c) 2024-2025
 * Author: cayxc
 * Homepage:  https://gitee.com/cayxc/mdmdt  https://github.com/cayxc/Mdmdt
 * License: Apache-2.0
 * ------------------------------------------------------------------------
*/
:root {
  /*--bg-color: rgb(250, 250, 250);*/
  --bg-color: rgb(250, 250, 252);
  --bg-color2: rgb(236, 236, 238);

  --text-color: #000;
  --text-grey: #666;
  --text-code: #2f479f;
  --title-color: #070909;
  --border-color: #d2d2d2;

  --color-1: #3e69d7;
  --color-1-0-a: rgba(62, 105, 215, 0.15);
  --color-1-0-b: rgba(62, 105, 215, 0.06);

  --color-2: #f59102;
  --color-2-0-a: rgba(245, 145, 2, 0.15);
  --color-2-0-b: rgba(245, 145, 2, 0.06);
  --color-2-0-c: rgba(245, 145, 2, 0.3);

  --color-3: #03b736;
  --color-3-0-a: rgba(3, 183, 54, 0.15);
  --color-3-0-b: rgba(3, 183, 54, 0.06);

  --color-4: #8250df;
  --color-4-0-a: rgba(130, 80, 223, 0.15);
  --color-4-0-b: rgba(130, 80, 223, 0.06);

  --color-5: #e30f2e;
  --color-5-0-a: rgba(227, 15, 46, 0.15);
  --color-5-0-b: rgba(227, 15, 46, 0.06);

  --md-char-color: rgba(72, 93, 108, 0.75);
  --meta-content-color: var(--md-char-color);
  --primary-color: var(--color-1);
  --primary-btn-border-color: var(--bg-color2);
  --primary-btn-text-color: var(--text-color);
  --window-border: 1px solid var(--border-color);
  --active-file-bg-color: var(--bg-color2);
  --active-file-text-color: var(--color-1);
  --active-file-border-color: var(--color-1);
  --side-bar-bg-color: var(--bg-color);
  --item-hover-bg-color: var(--bg-color2);
  --item-hover-text-color: var(--color-1);
  --select-text-bg-color: var(--color-1-0-a);
  --monospace: "JetBrains Mono", "Source Code Pro", "Fira Code", Consolas, Inconsolata, "Cascadia Code", Monaco, "Ubuntu Mono", monospace;

  /*--mermaid-theme: neutral;*/ /*or base, dark, forest, neutral, night*/
  --mermaid-font-family: "trebuchet ms", verdana, arial, sans-serif;
  --mermaid-sequence-numbers: on;
  --mermaid-flowchart-curve: linear;
  --mermaid--gantt-left-padding: 75;
}

html {
  height: 100vh;
  background-color: var(--bg-color);
  font-size: 16px !important;
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding: 14px;
}

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.6px;
  font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
  background: var(--bg-color);
  overflow-x: hidden;
}
body.os-windows {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: 1px;
}
* {
  tab-size: 4;
  -webkit-tab-size: 4;
  -moz-tab-size: 4;
  -o-tab-size: 4;
}

/*
 * ------------------------
 * scroll style
 * ------------------------
*/
::-webkit-scrollbar,
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  border-radius: 4px !important;
  background: var(--border-color) !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
  background: var(--bg-color2) !important;
}
html,
html * {
  scrollbar-color: var(--border-color) var(--bg-color2) !important;
  scrollbar-width: thin !important;
}

/*
 * -----------------------------------
 * h1 ~ h6, header
 * p, strong, dl, em, u, kbd, hr, mark
 * -----------------------------------
*/
h1, h2, h3, h4, h5, h6 {
  position: relative;
  line-height: 1.5;
  margin: 32px 0 18px;
  color: var(--title-color);
  letter-spacing: 2px;
}
h1 {
  font-size: 32px;
  border-bottom: 1px solid var(--border-color);
}
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

#write > h1 + *,
#write > h2 + *,
#write > h3 + *,
#write > h4 + *,
#write > h5 + *,
#write > h6 + * {
  margin-top: 18px !important;
}

#write > h1::before,
#write > h2::before,
#write > h3::before,
#write > h4::before,
#write > h5::before,
#write > h6::before,
#write > h1.md-focus::before,
#write > h2.md-focus::before,
#write > h3.md-focus::before,
#write > h4.md-focus::before,
#write > h5.md-focus::before,
#write > h6.md-focus::before {
  display: none;
  position: absolute;
  left: -36px;
  height: 20px;
  padding-left: 6px;
  padding-right: 3px;
  border: 1px solid var(--color-1);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-1);
}
#write > h1::before,
#write > h1.md-focus::before {
  content: 'h1';
  top: 15px;
}
#write > h2::before,
#write > h2.md-focus::before {
  content: 'h2';
  top: 10.5px;
}
#write > h3::before,
#write > h3.md-focus::before {
  content: 'h3';
  top: 8px;
}
#write > h4::before,
#write > h4.md-focus::before {
  content: 'h4';
  top: 5.5px;
}
#write > h5::before,
#write > h5.md-focus::before {
  content: 'h5';
  top: 4px;
}
#write > h6::before,
#write > h6.md-focus::before {
  content: 'h6';
  top: 2.5px;
}
#write > h1:hover::before,
#write > h2:hover::before,
#write > h3:hover::before,
#write > h4:hover::before,
#write > h5:hover::before,
#write > h6:hover::before {
  display: block;
}

hr {
  height: 1px;
  box-sizing: border-box;
  background: var(--border-color);
  border: none;
}

p {
  margin-top: 16px;
  margin-bottom: -5px;
  white-space: pre-wrap;
}
#write > p + p {
  margin-top: 24px;
}
p:has(span.md-image) {
  margin-bottom: 0;
}

strong {
  font-weight: 800;
  color: var(--title-color);
}

u {
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

em {
  font-weight: 400;
}

del {
  color: var(--text-grey);
  text-decoration: line-through;
  text-decoration-color: var(--color-5);
  -moz-text-decoration-color: var(--color-5);
}

mark {
  border-radius: 5px;
  background-color: var(--color-1);
  padding: 0 4px;
  color: var(--bg-color);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/*
 * ------------------------
 * a, link
 * ------------------------
*/
a {
  position: relative;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-1);
  font-size: 16px;
  text-underline-offset: 4px;
}
a:hover,
.md-link a:hover,
.footnotes a:hover {
  color: var(--color-2);
  text-decoration: underline;
  cursor: pointer !important;
}
/*以下写法是防止导出pdf时再标题或代码块部分生成链接图标*/
#write p a,
#write table a,
#write blockquote a,
#write .md-alert a,
#write li a {
  padding-left: 2px;
}
#write p a::before,
#write table a::before,
#write blockquote a::before,
#write .md-alert a::before,
#write li a::before {
  content: "";
  display: inline-block;
  position: relative;
  top: 2px;
  right: 2px;
  z-index: 30;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-image: url("");
}
#write a:hover::before {
  background-image: url("");
}
sup a,
a.reversefootnote {
  padding-left: 0 !important;
}
sup a::before,
a.reversefootnote::before,
.md-toc-content .md-toc-item > a::before {
  display: none;
  width: 0 !important;
  height: 0 !important;
  background-image: none !important;
}
a:hover {
  color: var(--color-2);
}
.footnotes,
.footnotes a {
  font-size: 14px;
  text-decoration: none;
}
.footnotes .md-def-name::before,
.footnotes .md-def-name::after {
  color: var(--text-color);
}
.footnotes .md-def-url,
.md-link .md-url {
  text-decoration: none;
  color: var(--color-1);
}

/*
 * ------------------------
 * ul, ol
 * ------------------------
*/
ul, ol {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
}
#write > p + ul,
#write > p + ol,
blockquote > ul,
blockquote > ol,
.md-alert > ul,
.md-alert > ol{
  margin-top: 11px;
}
ul {
  padding-left: 36px;
}
ol {
  padding-left: 40px;
}
ol ol {
  margin-left: -7px;
}
ol > li > ul {
  margin-left: -7px;
}
ul > li > ol {
  margin-left: -2px;
}
ul > li > p {
  margin: 0 0 0 -2px;
}
ol > li > p {
  margin: 0 0 0 -6px;
}
ul > .task-list-item > input {
  margin-left: -22px;
}
#write li {
  margin-top: 6px;
}
li > p {
  margin: -5px 0;
}

#write li img,
#write li pre,
#write li figure,
#write li blockquote,
#write li .md-alert {
  margin-top: 11px !important;
  margin-bottom: 11px !important;
}
#write li pre pre,
#write li .md-image {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*
 * ------------------------
 * image
 * ------------------------
*/
img,
span.md-image {
  margin: 16px auto 0 auto !important;
  border-radius: 8px !important;
  border: none !important;
  color: var(--md-char-color);
}
p.md-focus span.md-image {
  background: var(--color-1-0-b);
  box-shadow: 0 0 3px var(--border-color);
}
p.md-focus span.md-image {
  margin-top: 0;
}
span.md-image,
span.md-image span.md-content,
span.md-image span.md-image-src-span,
span.md-image span.md-image-before-src,
span.md-image span.md-image-after-src,
span.md-image span.md-image-input-src-btn,
span.md-image span.md-image-pick-file-btn,
span.md-image span.md-before::before,
span.md-image span.md-image-input-src-btn::before,
span.md-image span.md-image-pick-file-btn::before {
  color: var(--color-1);
}
span.md-image-btn {
  background: var(--bg-color2);
}
span.md-image-btn:hover::before {
  color: var(--bg-color) !important;
}
span.md-image span.md-image-pick-file-btn {
  border-left-color: var(--border-color);
}
.typora-export #write section:has(img),
.md-htmlblock-container section:has(img) {
  display: grid;
  grid-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(16px, auto));
  grid-auto-rows: minmax(16px, auto);
}
.typora-export #write > section:has(img) {
  margin-top: 16px;
}
.typora-export #write section img,
.md-htmlblock-container section img {
  margin: 0 !important;
}
.typora-export #write section:has(img) span,
.md-htmlblock-container section:has(img) span {
  display: block;
  margin: 8px 0;
}
.typora-export #write section span > img,
.md-htmlblock-container section span > img {
  margin: 8px 0 !important;
}
.typora-export #write section span > img:first-of-type,
.md-htmlblock-container section span > img:first-of-type {
  margin-top: 0 !important;
}
.typora-export #write section span > img:last-of-type,
.md-htmlblock-container section span > img:last-of-type {
  margin-bottom: 0 !important;
}
.typora-export #write > section:has(img):hover,
.md-htmlblock-container > section:has(img):hover{
  border-radius: 8px;
  background: var(--bg-color2);
  padding: 16px;
  transition: padding .3s linear;
  -webkit-transition: padding .3s linear;
}

/*
 * ------------------------
 * code
 * ------------------------
*/
code {
  border-radius: 4px;
  background: var(--color-1-0-a);
  padding: 3px 5px;
  color: var(--text-code);
  font-size: 14px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
h1 code {
  font-size: 26px;
}
h2 code {
  font-size: 22px;
}
h3 code {
  font-size: 18px;
}
h4 code {
  font-size: 16px;
}
.outline-content .outline-item code {
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
  vertical-align: middle;
}

/*
 * ------------------------
 * pre
 * ------------------------
*/
pre {
  margin-top: 16px;
  margin-bottom: 0;
  box-sizing: border-box;
  background: var(--bg-color2) !important;
  border-radius: 8px;
  font-size: 14px !important;
  color: var(--text-code);
}
pre pre {
  background: transparent !important;
  padding: 5px 10px;
  border: none;
}
pre .CodeMirror-wrap {
  padding: 16px 16px 16px 0;
}
pre .CodeMirror-wrap .CodeMirror-scroll {
  overflow-x: auto;
}
pre .CodeMirror-sizer {
  padding-left: 4px;
}
pre .CodeMirror-gutters {
  background: var(--bg-color2);
  border-color: var(--border-color);
}

/*
 * ------------------------
 * blockquote
 * ------------------------
*/
blockquote,
.md-alert {
  margin-top: 16px !important;
  margin-bottom: 0;
  padding: 16px;
  background: var(--color-1-0-b);
  box-sizing: border-box;
  border-radius: 8px;
  border-left: 4px solid var(--color-1);
  border-right: 0.1px solid transparent;
  border-bottom: 0.1px solid transparent;
  border-top: 0.1px solid transparent;
}
blockquote > *:first-child,
.md-alert > *:first-child {
  margin-top: 0 !important;
}
blockquote > *:last-child,
.md-alert > *:last-child {
  margin-bottom: 0 !important;
}
.md-alert.md-alert-note {
  border-left-color: var(--color-1);
  background: var(--color-1-0-b);
  color: var(--color-1);
}
.md-alert.md-alert-note .md-alert-text-note {
  color: var(--color-1);
}
.md-alert.md-alert-caution {
  border-left-color: var(--color-2);
  background: var(--color-2-0-b);
  color: var(--color-2);
}
.md-alert.md-alert-caution .md-alert-text-caution {
  color: var(--color-2);
}
.md-alert.md-alert-tip {
  border-left-color: var(--color-3);
  background: var(--color-3-0-b);
  color: var(--color-3);
}
.md-alert.md-alert-tip .md-alert-text-tip {
  color: var(--color-3);
}
.md-alert.md-alert-important {
  border-left-color: var(--color-4);
  background: var(--color-4-0-b);
  color: var(--color-4);
}
.md-alert.md-alert-important .md-alert-text-important {
  color: var(--color-4);
}
.md-alert.md-alert-warning {
  border-left-color: var(--color-5);
  background: var(--color-5-0-b);
  color: var(--color-5);
}
.md-alert.md-alert-warning .md-alert-text-warning {
  color: var(--color-5);
}

/*
 * ------------------------
 * sup, sub, kbd
 * ------------------------
*/
sup, sub {
  font-size: 12px;
}
sup.md-footnote {
  background: transparent;
  padding: 0 2px;
  color: var(--color-1);
}
sup.md-footnote:hover {
  color: var(--color-2);
  cursor: pointer;
}
kbd {
  display: inline-block;
  border: none;
  border-image: none;
  border-radius: 5px;
  background: var(--title-color);
  padding: 0 6px;
  box-shadow: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-size: 14px;
  font-weight: 900;
  color: var(--bg-color);
}
::selection {
  background: var(--color-2-0-c);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/*
 * ------------------------
 * table
 * ------------------------
*/
table,
figure {
  width: 100%;
  margin-bottom: 0;
  border-radius: 8px;
  padding: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
}
figure {
  margin-top: 16px !important;
}
table {
  margin-top: 0;
  border: 1px solid var(--border-color) !important;
  overflow: hidden;
}
table thead tr th {
  background: var(--bg-color2);
}
table tbody tr:nth-child(even) td {
  background: var(--bg-color2);
}
table tbody tr:nth-child(odd) td {
  background: var(--bg-color);
}
table tr th, table tr td {
  padding: 10px !important;
  white-space: pre-wrap !important;
}
table tr td,
table thead tr th {
  border-left: 1px solid var(--border-color) !important;
}
table tbody tr td:first-of-type,
table thead tr th:first-of-type {
  border-left: none !important;
}
.md-grid-board-wrap table {
  border: none !important;
  border-radius: 0;
}
.md-grid-board-wrap table tr th,
.md-grid-board-wrap table tr td {
  padding: 0 !important;
}
#md-grid-width,
#md-grid-height {
  text-align: center !important;
  padding: 1px 0;
}
button#md-resize-grid {
  display: block !important;
  width: 100%;
  margin: 5px auto 0;
  color: var(--bg-color);
}
button#md-resize-grid:hover {
  color: var(--color-1);
  border-color: var(--color-1);
}
.ty-table-edit {
  margin-left: 0;
}
.md-tooltip-remove {
  position: absolute;
  z-index: 200;
  margin-top: -28px !important;
  background: var(--bg-color);
}
.md-tooltip-remove .md-delete-table {
  margin-right: 10px !important;
}
.md-table-resize-popover .md-reset > a::before {
  display: none !important;
}

/*
 * ------------------------
 * btn
 * ------------------------
*/
.btn,
.btn-default,
.long-btn {
  border-radius: 5px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-color2) !important;
  outline: none !important;
}
.btn-primary {
  background: var(--color-1) !important;
  border-color: var(--color-1) !important;
  color: #fff;
}

.btn:hover,
.long-btn:hover {
  background: var(--color-1-0-b) !important;
  border-color: var(--color-1) !important;
  color: var(--color-1);
}

.btn:focus,
.long-btn:focus {
  outline: none !important;
}
.btn {
  margin-right: 5px !important;
}
.btn:last-of-type {
  margin-right: 0;
}
.dropdown-toggle::after {
  font-size: 14px;
}
.dropdown-toggle:hover::after {
  color: var(--color-1);
}

/*
 * ------------------------
 * select
 * ------------------------
 */
select {
  border-radius: 6px !important;
  border: 1px solid var(--border-color) !important;
  padding: 6px !important;
}
option {
  background: var(--bg-color);
}
/*
 * ------------------------
 * textarea
 * ------------------------
 */
textarea {
  outline: none;
  padding: 16px;
  border-radius: 8px;
  border-color: var(--border-color);
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
}
#write textarea {
  margin-top: 14px !important;
  margin-bottom: 0;
}

/*
 * ------------------------
 * input
 * ------------------------
*/
html input,
input {
  position: relative;
  border-radius: 5px !important;
  border: 1px solid var(--border-color);
  outline: none !important;
  padding: 0 6px;
  line-height: 1.2;
}
html input:focus,
html textarea:focus,
html input[type="number"]:focus,
html input[type="search"]:focus,
html input[type="text"]:focus {
  border-color: var(--color-1) !important;
  box-shadow: none !important;
  outline: none !important;
}
input::placeholder {
  font-size: 14px;
  color: var(--text-grey) !important;
}

/*input checkbox*/
input[type="checkbox"],
input[type="radio"] {
  margin-right: 10px !important;
  margin-bottom: -2px !important;
  width: 14px !important;
  height: 14px !important;
  box-sizing: border-box;
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 3px !important;
  padding: 0 !important;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  list-style: none;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--color-1) !important;
  border-color: transparent !important;
}
input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 2.5px;
  left: 3.5px;
  width: 5px;
  height: 9px;
  box-sizing: border-box;
  background: transparent;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
}
input[type="radio"] {
  border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  border: 1px solid var(--border-color) !important;
}
input[type="radio"]:checked::after {
  content: "";
  display: block;
  margin: 3.5px auto;
  width: 5px;
  height: 5px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

/*
 * ------------------------
 * header
 * ------------------------
*/
body > header {
  background: var(--bg-color) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15) !important;
}

/*
 * ------------------------
 * md-htmlblock
 * md-mathblock
 * ------------------------
*/
.md-htmlblock-panel,
.md-htmlblock-container,
.md-htmlblock-container .md-htmlblock-panel-placeholder {
  background: transparent;
}
.md-htmlblock-container,
.md-math-container {
  border-radius: 8px;
  background: var(--bg-color);
  overflow: auto;
}
.md-math-container {
  width: 100%;
  padding: 16px;
}

.md-rawblock-on-edit .md-htmlblock-panel,
.md-rawblock-on-edit .md-mathblock-panel {
  border-radius: 8px;
  background: var(--bg-color2);
  padding: 16px;
}
.md-mathblock-panel .md-rawblock-control {
  background: transparent;
}
.md-mathblock-panel .code-tooltip {
  margin: 14px 6px 0;
  box-shadow: none;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
}
.code-tooltip {
  box-shadow: none;
}
.code-tooltip .ty-input {
  border-color: var(--border-color);
}
.md-rawblock-on-edit .md-rawblock-input {
  padding: 0;
  background: transparent;
}
.md-rawblock .md-rawblock-tooltip {
  float: right;
  margin-top: -11px;
  height: auto;
  border-radius: 5px;
  background: var(--bg-color2);
  animation: none !important;
}
.md-rawblock .md-rawblock-tooltip span {
  padding-top: 4px;
  padding-bottom: 4px;
}
.md-rawblock .md-rawblock-tooltip-edit-btn:hover {
  background: transparent;
}

.md-htmlblock:hover .md-htmlblock-container,
.md-htmlblock:hover .md-rawblock-tooltip,
.md-math-block:hover .md-math-container,
.md-math-block:hover .md-rawblock-tooltip,
.md-rawblock-on-edit:hover .md-rawblock-tooltip {
  background: var(--bg-color2);
}
.md-inline-math script {
  color: #f9007c;
}

/*
 * ------------------------
 * #write
 * ------------------------
*/
#write {
  margin: 0 auto;
  width: 100%;
  max-width: 1424px;
  min-width: 300px;
  padding: 32px 112px;
  overflow: auto;
  /*  scroll-behavior: smooth;
    scroll-padding: 16px;*/
}
#write > *:first-child {
  margin-top: 0;
}

span.md-comment {
  color: var(--md-char-color);
  opacity: 1;
}
.md-image-btn.selected, .md-image-btn:hover {
  background: var(--color-1);
}
#write pre.md-meta-block:empty:before {
  color: var(--text-code);
}

/*
 * ------------------------
 * typora-source
 * ------------------------
*/
#typora-source .CodeMirror-sizer {
  padding-right: 0 !important;
}
#typora-source .CodeMirror-lines {
  margin: 0 auto;
  max-width: 1424px;
  min-width: 300px;
  padding: 32px 112px;
}
#typora-source .CodeMirror-lines pre {
  border: none !important;
  background: var(--bg-color) !important;
  padding: 8px 16px !important;
  font-size: 16px !important;
}
#typora-source .CodeMirror-activeline pre {
  background: var(--bg-color2) !important;
  border-radius: 6px;
}
#typora-source .CodeMirror-activeline .CodeMirror-linebackground {
  background: transparent !important;
}
#typora-source .CodeMirror-lines .cm-header {
  color: var(--color-2);
}
.CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
  border-left: 3px solid var(--color-2);
}
.cm-s-typora-default .cm-header, .cm-s-typora-default .cm-property,
.cm-s-typora-default .cm-link {
  color: var(--color-2);
}
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment, .cm-overlay {
  color: var(--md-char-color);
}
.cm-s-typora-default .cm-string {
  color: var(--color-1);
}
.cm-s-typora-default .cm-code, .cm-s-typora-default .cm-comment {
  color: var(--text-code);
}
.cm-s-typora-default .cm-tag {
  color: #e31570;
}

.cm-attribute {
  color: var(--color-2);
}

/*
 * ------------------------
 * #toc-dropmenu
 * ------------------------
*/
#toc-dropmenu {
  top: calc(var(--title-bar-height) + 8px) !important;
  right: 18px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
#toc-dropmenu #pin-outline-btn {
  display: inline-block;
  top: 10px;
}
#toc-dropmenu .divider {
  margin-bottom: 0;
}

/*
 * ------------------------
 * sidebar
 * toc-content
 * ------------------------
*/
.os-windows #sidebar-content {
  margin-top: -1px;
  border-top: 1px solid var(--border-color);
}
.os-windows .ty-show-outline-filter #sidebar-content .sidebar-content-content {
  margin-top: -4px;
}
.os-windows .ty-show-search #sidebar-content .sidebar-content-content {
  margin-top: -7px;
}
.sidebar-tabs {
  padding: 0 2px;
}
.outline-content {
  overflow: auto !important;
  padding: 14px 14px 14px 17px;
  font-size: 14px !important;
}
.os-windows .outline-content {
  padding-top: 15px;
}
.outline-content li {
  position: relative;
  z-index: 30;
}
.outline-content > li:first-of-type::before {
  top: 0;
}
.outline-content li ul {
  position: relative;
  z-index: 48;
  margin-left: 18px;
  margin-top: 0 !important;
}
.no-collapse-outline .outline-content li ul {
  margin-left: 21px;
}
.outline-content li .outline-item {
  position: relative;
  z-index: 50;
  margin: 0 0 3px 7px;
  width: calc(100% - 4px);
  border-radius: 5px;
  border: none;
  line-height: 1;
  padding: 0 0 0 4px;
}
.outline-item > .outline-expander {
  display: block;
  float: left;
  width: auto;
  height: 0;
  background: transparent;
  padding-left: 0;
}
.outline-item > .outline-expander:before {
  margin-top: 10px;
  margin-left: -2px;
  background: transparent;
  padding: 0 4px 0 2px;
  font-size: 10px;
}
.outline-content li .outline-label {
  display: inline-block;
  border-radius: 4px;
  padding: 7px 7px 7px 8px;
  font-size: 14px !important;
  line-height: 1.2;
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
  text-decoration: none;
}
.outline-item-single .outline-label,
.outline-item-single.outline-item-open .outline-label,
.no-collapse-outline .outline-content li .outline-label {
  padding-left: 0 !important;
}
.outline-item > .outline-expander:hover + .outline-label,
.outline-item-open > .outline-item > .outline-label {
  padding-left: 11px;
}
.no-collapse-outline .outline-item-open > .outline-item > .outline-label {
  padding-left: 0 !important;
}
.outline-item-active > .outline-expander:hover + .outline-label,
.outline-item-open > .outline-item-active > .outline-label {
  padding-left: 12px;
}
.outline-item-active > .outline-expander,
.outline-item-active > .outline-label {
  font-weight: 900;
}
.outline-content li .outline-item::before {
  content: '';
  position: absolute;
  z-index: 38;
  left: -10px;
  top: -27.5px;
  width: 10px;
  height: calc(50% + 28px);
  background: transparent;
  border-left: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.os-windows .outline-content li .outline-item::before {
  top: -28.5px;
}
.outline-content > li:first-of-type > .outline-item::before {
  top: calc(50% - 1px);
  height: calc(50% + 15px);
  border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  border-bottom: none;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 0;
}
.outline-children > li:first-child > .outline-item::before,
.outline-content > li:nth-child(2) > .outline-item::before {
  top: -11px;
  height: calc(50% + 12px);
}
.os-windows .outline-children > li:first-child > .outline-item::before,
.os-windows .outline-content > li:nth-child(2) > .outline-item::before {
  top: -13px;
  height: calc(50% + 13px);
}
.no-collapse-outline .outline-children > li:first-child > .outline-item::before,
.no-collapse-outline .outline-content > li:nth-child(2) > .outline-item::before {
  top: -8px;
  height: calc(50% + 8px);
}
.outline-content > li:last-child > .outline-item::before,
.outline-children > li:last-child > .outline-item::before {
  border-bottom-left-radius: 3px;
}
.no-collapse-outline .outline-item-wrapper > .outline-children::before,
.outline-item-open > .outline-children::before {
  content: '';
  position: absolute;
  left: -21px;
  top: -26px;
  width: 1px;
  height: calc(100% + 12px);
  background: transparent;
  border-left: 1px solid var(--border-color);
}
.no-collapse-outline .outline-item-wrapper > .outline-children::before {
  left: -24px;
}
.no-collapse-outline .outline-content > li.outline-item-wrapper:first-child > .outline-children::before,
.outline-content > li.outline-item-open:first-child > .outline-children::before {
  top: -15px;
}
.outline-content > li:only-of-type > .outline-item::before,
.no-collapse-outline .outline-item-wrapper:last-of-type > .outline-children::before,
.no-collapse-outline .outline-children > li.outline-item-wrapper:last-child > .outline-children::before,
.outline-item-open:last-of-type > .outline-children::before,
.outline-children > li.outline-item-open:last-child > .outline-children::before {
  display: none;
}
.outline-content > li:only-of-type {
  margin-left: -8px;
}
li > .outline-item-active:before,
.outline-item:hover::before,
.outline-item-active > .outline-item::before {
  width: 7px !important;
}
li > .outline-item-active,
li > .outline-item:hover,
.outline-item-active > .outline-item {
  margin-left: 4px !important;
  padding-left: 7px !important;
}

li > .outline-item-active::before,
li > .outline-item:hover::before,
.outline-item-active > .outline-item::before {
  left: -7px !important;
}
.outline-item:hover,
.outline-item:hover > .outline-label,
.outline-item-active,
.outline-item-active > .outline-label {
  background: var(--bg-color2) !important;
}
.outline-item-active > .outline-label,
.outline-item-active > .outline-expander::before {
  color: var(--color-1);
}
.ty-on-outline-filter .outline-content .outline-item::before,
.ty-on-outline-filter .outline-content .outline-item::after {
  display: none;
}
.ty-on-outline-filter .outline-content > li > ul,
.ty-on-outline-filter .outline-content .outline-item {
  margin-left: 0;
}

/* .oultine-item search result */
.outline-content:has(.ty-outline-hit) {
  padding-left: 14px;
}
.outline-content li:has(.ty-outline-hit) *::before,
.outline-content li:has(.ty-outline-hit) *::after {
  content: '';
  display: none;
}
.outline-content li:has(.ty-outline-hit) .outline-item {
  margin-left: 1px !important;
  width: calc(100% - 1px);
  padding-left: 0 !important;
}
.outline-content li:has(.ty-outline-hit) .outline-item > .outline-label {
  padding: 8px 10px !important;
}

/*
 * --------------------------
 * file-library-list
 * file-library-search-result
 * --------------------------
*/
#file-library-list,
#file-library-search-result {
  padding: 14px;
}
/*ty-search-item*/
#file-library-list .file-list-item,
#file-library-search-result .ty-search-item {
  margin-bottom: 8px;
  border: 1px solid transparent;
  border-bottom-color: var(--border-color);
}
#file-library-list .file-list-item {
  padding-left: 14px;
  padding-right: 14px;
}

#file-library-list .file-list-item.active,
#file-library-search-result .ty-search-item.active {
  border-radius: 5px;
  border: 1px solid var(--color-1);
}
#file-library-list .file-list-item.active {
  padding: 6px 12px;
}
#file-library-search-result .ty-search-item.active {
  padding: 6px 12px 6px 0;
}
#file-library-list .file-list-item:first-of-type.active,
#file-library-search-result .ty-search-item:first-of-type.active {
  margin-top: 0;
}
#file-library-list .file-list-item:hover,
#file-library-search-result .ty-search-item:hover {
  border-radius: 5px;
  background: var(--bg-color2);
  border-color: var(--border-color);
}
#file-library-list .file-list-item:hover {
  color: var(--color-1);
}
#file-library-list .file-list-item:hover + .file-list-item:not(.active),
#file-library-list .file-list-item.active + .file-list-item:not(.active),
#file-library-search-result .ty-search-item:hover + .ty-search-item:not(.active),
#file-library-search-result .ty-search-item.active + .ty-search-item:not(.active) {
  border-top: 1px solid var(--border-color);
}
#file-library-list .file-list-item.active:hover,
#file-library-search-result .ty-search-item.active:hover {
  border-color: var(--color-1);
}

#file-library-search-result .ty-search-item.active {
  color: var(--text-color);
}
#file-library-search-result .ty-search-item.active .ty-search-item-line {
  white-space: pre-wrap;
  word-break: break-word;
}
.file-list-item-time {
  margin-right: 0;
  padding-right: 0;
}
.file-list-item-count {
  margin-right: 0;
  border-radius: 3px;
  padding: 0 6px;
}
#file-library-search-result .ty-search-item.active .file-list-item-count {
  padding-right: 0;
}
#sidebar-loading-template {
  display: none;
  margin-bottom: 5px;
  border-radius: 5px;
  padding: 8px;
}
.ty-file-search-match-text {
  background-color: var(--color-2-0-c);
}

/*
 * ------------------------
 * file-library-tree
 * ------------------------
*/
#file-library-tree {
  box-sizing: border-box;
  padding-top: 8px;
  padding-left: 14px;
  padding-right: 14px;
}
.file-node-root {
  position: relative;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.file-tree-node {
  margin-bottom: 1px;
}
.file-node-children {
  margin-left: 12px;
}
.file-node-root > .file-node-children {
  margin-left: -2px;
}
.file-tree-node > .file-node-content > .file-node-open-state + .file-node-icon {
  margin-left: 4px;
}
.file-node-expanded > .file-node-content > .file-node-open-state + .file-node-icon,
.file-node-collapsed > .file-node-content > .file-node-open-state + .file-node-icon {
  margin-left: 3px;
}
.fa-folder:before,
.fa-folder:after,
.fa-caret-right,
.fa-caret-down {
  color: var(--text-grey);
}
.file-node-content .file-node-open-state {
  position: relative;
  padding-left: 3px;
}
.file-node-expanded .file-node-content .file-node-open-state {
  padding-left: 3px;
}
.file-node-content .file-node-open-state::after {
  content: "";
  position: absolute;
  z-index: 20;
  left: 0;
  top: -21px;
  width: 8px;
  height: 32px;
  border-left: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: transparent;
}
.file-node-expanded > .file-node-content .file-node-open-state::after {
  left: -12px;
  top: -21px;
  width: 7px;
}
.file-node-root > .file-node-content .file-node-open-state::after {
  display: none;
}
.file-tree-node:first-child > .file-node-content .file-node-open-state::after {
  top: -11px;
  height: 22px;
}
.file-node-expanded:first-child > .file-node-content .file-node-open-state::after {
  top: -11px;
}
.file-tree-node:last-child > .file-node-content .file-node-open-state::after {
  border-bottom-left-radius: 3px;
}
.file-node-collapsed > .file-node-content .fa-caret-right {
  margin-left: 9px;
}
.file-node-expanded {
  margin-left: 8px;
  border-left: 1px solid var(--border-color);
}
.file-tree-node:last-child {
  border-left-color: transparent;
}
.file-node-expanded > .file-node-content {
  margin-left: 3px;
}
.file-node-root > .file-node-content {
  margin-left: 0;
}
.file-node-content {
  position: relative;
  padding-top: 3px;
}
.file-node-content::after {
  content: '';
  display: none;
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 0;
  width: calc(100% - 10px);
  height: 29px;
  background: var(--bg-color2);
  border-radius: 5px;
}
.file-library-file-node:hover > .file-node-content::after,
.file-tree-node.active > .file-node-content::after {
  display: block;
}
.file-library-file-node:hover > .file-node-content > .file-node-open-state:after,
.file-tree-node.active > .file-node-content > .file-node-open-state:after {
  width: 6px;
}
.file-node-background {
  display: none !important;
}
.file-library-node:not(.file-node-root):focus > .file-node-content {
  outline: none;
}

/*
 * ------------------------
 * TOC md-toc
 * ------------------------
*/
.md-toc {
  margin: 16px 0 0 0;
  font-size: 14px;
}
.md-toc-content {
  position: relative;
  margin: 0 0 0 3px;
  padding: 0;
}
.md-toc-content:before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 1px;
  height: calc(100% - 30px);
  border-left: 1px solid var(--border-color);
}
.md-toc:focus .md-toc-content {
  margin: 0 !important;
  border: none !important;
}
.md-toc-content .md-toc-item {
  position: relative;
  padding-bottom: 8px;
}
.md-toc-content .md-toc-item:before {
  content: '';
  position: absolute;
  top: 8px;
  left: -2px;
  width: 5px;
  height: 5px;
  background: var(--border-color);
  border-radius: 50%;
}
.md-toc-content .md-toc-h1::before {
  background: var(--color-1);
}
.md-toc-item a.md-toc-inner:hover {
  text-decoration: none;
}
.md-toc-item:has(a.md-toc-inner:hover)::before {
  background: var(--color-2);
}
.md-toc-item a.md-toc-inner:hover code {
  background: var(--color-2-0-a);
  color: var(--color-2);
}
.md-toc-item a {
  padding-left: 18px !important;
}


#write div.md-toc-tooltip {
  z-index: 100;
  top: -52px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 3px 0;
}
.md-toc-content .md-toc-h1 a {
  padding-left: 20px;
}
#write div.md-toc-tooltip .md-delete-toc {
  margin: 0 !important;
  padding: 0 10px;
  background: var(--bg-color);
}
#write div.md-toc-tooltip .md-delete-toc:hover {
  background: var(--bg-color2);
  color: var(--color-1);
}

/*
 * ------------------------
 * code colors
 * ------------------------
*/
.cm-s-inner {
  background-color: transparent !important;
  color: var(--text-code);
}
.cm-s-inner .CodeMirror-gutters {
  border-right-color: var(--border-color);
  color: var(--text-code);
}
.cm-s-inner .CodeMirror-guttermarker,
.cm-s-inner .CodeMirror-guttermarker-subtle,
.cm-s-inner .CodeMirror-linenumber {
  color: var(--md-char-color);
}
.cm-s-inner .CodeMirror-cursor {
  border-left: 1px solid var(--border-color);
}
.cm-s-inner div.CodeMirror-selected,
.cm-s-inner.CodeMirror-focused div.CodeMirror-selected,
.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line > span::selection,
.cm-s-inner .CodeMirror-line > span > span::selection,
.cm-s-inner .CodeMirror-line::-moz-selection,
.cm-s-inner .CodeMirror-line > span::-moz-selection,
.cm-s-inner .CodeMirror-line > span > span::-moz-selection {
  background: var(--color-2-0-c);
}
.cm-s-inner .CodeMirror-activeline-background { background: transparent; }
.cm-s-inner .cm-keyword { color: #bb59fd; }
.cm-s-inner .cm-operator { color: #40d7ec; }
.cm-s-inner .cm-variable { color: #f4395dff; }
.cm-s-inner .cm-variable-2 { color: #e2785f; }
.cm-s-inner .cm-variable-3 { color: #6083ff; }
.cm-s-inner .cm-builtin { color: #f61d78; }
.cm-s-inner .cm-atom { color: #fa5336; }
.cm-s-inner .cm-number { color: #f59102; }
.cm-s-inner .cm-def { color: #3876eb; }
.cm-s-inner .cm-string { color: #02be74; }
.cm-s-inner .cm-string-2 { color: #0a790a; }
.cm-s-inner .cm-comment,
.cm-s-inner .cm-meta { color: var(--md-char-color); }
.cm-s-inner .cm-attribute { color: #c08b01; }
.cm-s-inner .cm-property { color: #1b9f72; }
.cm-s-inner .cm-qualifier { color: #dc7b45; }
.cm-s-inner .cm-tag { color: #e32e73; }
.cm-s-inner .cm-tag.cm-bracket {color: #0c9bd3;}
.cm-s-inner .cm-header, .cm-s-inner.cm-header {color: #401df1;}
.cm-s-inner .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: var(--text-code) !important;
}
/* apply to code fences with plan text*/
.md-fences {
  background-color: var(--bg-color2);
  color: var(--text-grey);
}
.md-fences .code-tooltip {
  z-index: 50;
  right: 0 !important;
  bottom: -28px !important;
  padding: 0;
  border-radius: 5px;
  background-color: var(--bg-color2);
  color: var(--text-color);
}
.md-fences .code-tooltip input,
.md-fences .code-tooltip span {
  margin: 0;
  padding: 3px;
  border-radius: 5px;
}

/**
 * --------------------------------------
 * unibody-window
 * Control UI on Windows/Linux (optional)
 * --------------------------------------
*/
.unibody-window #write ul,
.typora-export #write ul {
  padding-left: 34px;
}
.unibody-window #write ol,
.typora-export #write ol {
  padding-left: 36px;
}
.unibody-window #write ul ul,
.unibody-window #write ol ol,
.unibody-window #write ul > li > ol,
.unibody-window #write ol > li > ul,
.typora-export #write ul ul,
.typora-export #write ol ol,
.typora-export #write ul > li > ol,
.typora-export #write ol > li > ul {
  margin-left: 0;
}
.unibody-window #write ul > li > p {
  margin: 0;
}
.unibody-window #write ol > li > p,
.typora-export #write ol > li > p {
  margin: 0 0 0 -2px;
}
.unibody-window #write ul > .task-list-item > input,
.typora-export #write ul > .task-list-item > input {
  margin-left: -22px;
}
.unibody-window .long-btn {
  border-radius: 8px !important;
}

/* .dropdown-menu */
.dropdown-menu {
  margin-top: 4px;
  padding: 8px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color);
}
#recent-file-panel-search-input,
.megamenu-menu-panel .btn,
.dropdown-menu li a,
.dropdown-menu li:hover {
  border-radius: 5px !important;
}
.ty-spell-check-panel-item {
  margin-bottom: 4px;
  border-radius: 5px;
}
.btn-split-group .dropdown-menu {
  margin-top: 0;
}

.dropdown-menu li a {
  font-size: 14px;
}
.dropdown-menu table th,
.dropdown-menu table td {
  padding: 5px !important;
}
.dropdown-menu li:hover > a,
.dropdown-menu li > span > a:hover,
#sidebar-files-menu li:hover > a,
#close-sidebar-menu-btn:hover {
  background: var(--bg-color2) !important;
  color: var(--color-1) !important;
}
.dropdown-menu li > span > a:hover {
  background: var(--color-1-0-b) !important;
  box-shadow: inset 0 0 0 1px var(--color-1), inset 0 -1px 0 var(--color-1);
}
.dropdown-menu li.file-action-item,
.dropdown-menu li.file-sort-item,
.dropdown-menu li.file-sort-item + li {
  margin-top: 0;
  border-radius: 0 !important;
}

/* .toolbar-icon */
.unibody-window .long-btn:hover span,
.unibody-window .long-btn:hover i,
.megamenu-menu-panel .btn:hover,
#megamenu-menu-header-title:hover,
.toolbar-icon:hover,
#megamenu-back-btn:hover i {
  color: var(--color-1);
  text-decoration: none;
}
.unibody-window .long-btn:hover,
.megamenu-menu-panel .btn:hover,
#megamenu-back-btn:hover {
  border-color: var(--color-1);
  background: var(--bg-color2);
}
#w-titlebar-left {
  margin-top: 3px;
}
#w-traffic-lights span {
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
}
#w-traffic-lights .btn {
  margin: 0 !important;
}
#w-traffic-lights #w-min,
#w-traffic-lights #w-close,
#w-traffic-lights #w-max {
  padding-top: 8px;
  padding-left: 18px;
}
#w-traffic-lights #w-close {
  border-top-right-radius: 8px !important;
}
#w-max-group.w-show-more > #w-full,
#w-max-group.w-show-more > #w-pin {
  display: block !important;
  background: var(--bg-color2) !important;
}
#w-max-group *,
#w-max-group.w-show-more > #w-full *,
#w-max-group.w-show-more > #w-pin * {
  color: var(--text-color) !important;
}
#w-max-group.w-show-more > #w-pin {
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}
#w-traffic-lights > span:not(#w-close):hover {
  background: var(--bg-color2) !important;
  color: var(--text-color);
}
#w-traffic-lights #w-close:hover {
  background: var(--color-5) !important;
  color: white !important;
}
#w-max-group.w-show-more > #w-full:hover *,
#w-max-group.w-show-more > #w-pin:hover * {
  color: var(--color-1) !important;
}

/*  #megamenu-content, #megamenu-menu-sidebar */
.unibody-window #megamenu-menu-sidebar {
  --bg-color: #1b1b1f;
  --bg-color2: rgb(40, 42, 50);
  --border-color: rgb(60, 62, 70);
  background: var(--bg-color);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
#megamenu-menu-sidebar .megamenu-menu-list {
  border: none;
}
.megamenu-section {
  margin-top: 12px;
}
.megamenu-menu-panel h1 {
  margin-top: 32px;
  margin-bottom: 32px;
  font-size: 30px;
  line-height: 30px;
}
#megamenu-section-about h1 {
  text-align: center;
}
.megamenu-menu-panel h2 {
  font-size: 26px;
  line-height: 26px;
}
.megamenu-menu-panel .btn {
  padding: 6px 12px;
}
.megamenu-menu-panel .long-btn {
  padding: 10px 12px;
  text-align: center;
}
.megamenu-content {
  padding-right: 30px;
  padding-top: 26px;
  background: var(--bg-color);
}
.megamenu-menu-panel #recent-file-panel .dropdown-menu {
  margin-top: 4px;
}
#open-theme-folder-btn {
  margin-top: 32px;
}
.megamenu-menu-header {
  border-color: var(--border-color);
}
.megamenu-menu-header #megamenu-back-btn {
  margin-left: 10px;
  border-radius: 6px;
  border-width: 2px;
}
.megamenu-menu-header #megamenu-back-btn > i {
  display: block;
  font-size: 16px;
  line-height: 28px;
}
.megamenu-menu-header #megamenu-menu-header-title:hover {
  color: var(--color-1);
}
#megamenu-menu-list {
  padding: 0 8px;
}
.megamenu-menu-list li {
  margin-top: 6px;
}
.megamenu-menu-list li a {
  display: block;
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 16px;
  line-height: 34px;
}
.megamenu-menu-list li a .fa {
  display: inline-block;
  margin-left: 0;
  margin-right: 0;
  opacity: 1;
  font-size: 18px;
  line-height: 38px;
}
.megamenu-menu-list li a .fa + span {
  margin-left: 14px;
}
.megamenu-menu-list li #m-saved .fa {
  font-size: 20px;
  line-height: 36px !important;
  color: var(--color-1);
}
.megamenu-menu-list li a:hover,
.megamenu-menu-list li a.active:hover {
  background: var(--bg-color2) !important;
  border: 1px solid var(--color-1);
  color: var(--color-1) !important;
}
.megamenu-menu-list li a.active {
  background: var(--bg-color2);
  color: var(--color-1) !important;
}
@media (max-width: 768px) {
  #megamenu-back-btn {
    margin-left: 0 !important;
  }
  .dropdown-menu {
    padding: 8px !important;
  }
}
#recent-file-panel-action-btn-container {
  margin-right: 0;
}
#recent-file-panel-search-input {
  width: calc(100% - 55px);
}

#megamenu-clear-recet-documents {
  background: var(--bg-color2);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
}
#megamenu-clear-recet-documents:hover {
  color: var(--color-1);
}
.ty-show-search #info-panel-tab-search .info-panel-tab-border,
.ty-show-search #info-panel-tab-search .info-panel-tab-border,
.active-tab-files #info-panel-tab-file .info-panel-tab-border,
.active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
  height: 3px;
  border-radius: 2px;
}
.megamenu-menu-panel {
  scrollbar-width: none !important;
}
#theme-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  justify-content: space-between;
  grid-gap: 32px;
  max-width: 100%;
}
@media (max-width: 1440px) {
  #theme-preview-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 1200px) {
  #theme-preview-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 992px) {
  #theme-preview-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  #theme-preview-grid {
    grid-template-columns: 1fr;
  }
}
.theme-preview-div {
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 5px;
  border: 3px solid var(--border-color);
  border-radius: 10px;
  color: var(--color-1);
}
.theme-preview-content {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.theme-preview-div:hover {
  border-color: var(--color-2);
}
.theme-preview-div.active {
  border-color: var(--color-1);
}
.theme-preview-div .fa,
#outline-btn:hover {
  color: var(--color-1) !important;
}

/* context menu */
.context-menu {
  padding: 6px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-color);
}
.ext-context-menu {
  margin: -4px 1px 0 1px;
}
.context-menu li a {
  display: inline-block;
  width: 100%;
  border-radius: 6px !important;
}
.context-menu > .active a {
  color: var(--color-1) !important;
}
.tb43e-d6bd-dbe4y {
  background: var(--bg-color2);
}

/*
 * ------------------------
 * UI-controls
 * dialogs
 * ------------------------
*/
.form-control {
  padding: 6px;
}

/* alert-msg */
#searchpanel-msg {
  margin-top: 2px;
  margin-bottom: 8px;
  background: var(--color-1-0-a);
}
.alert.alert-warning,
.alert.alert-warning * {
  color: var(--color-1) !important;
}
#md-searchpanel {
  padding-top: 7px;
}
#md-searchpanel input,
#md-replace-type-label,
#search-panel-replace-btn,
.modal-dialog,
.modal-title,
.modal-content {
  border-radius: 5px;
}
.modal-content {
  padding: 8px;
  border-radius: 8px;
}
#sidebar-files-menu li a {
  padding-top: 5px;
  padding-bottom: 5px;
}
#sidebar-files-menu .file-action-item {
  line-height: 30px;
}
.ty-sidebar-search-panel {
  padding-left: 14px !important;
  padding-right: 14px !important;
}
#file-library-search-panel {
  padding-top: 3px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border-color) !important;
}
#file-library-search-input {
  top: 4px;
  width: 100% !important;
  border-radius: 0 !important;
}
#file-library-search-input,
.native-window #file-library-search-input {
  height: 28px;
  border-radius: 5px !important;
  font-size: 12px;
}
#ty-sidebar-search-panel .searchpanel-search-option-btn {
  top: 12px;
}
#close-outline-filter-btn {
  top: 12px;
  right: 15px;
  border: none !important;
  background: transparent !important;
}
#sidebar-content #file-library-search-panel .searchpanel-search-option-btn {
  top: 12px;
}


/* #root .window */
.window,
.window label {
  font-size: 13px !important;
}
.window .window-header h2 {
  font-size: 15px !important;
}
.window .nav-group-item {
  margin: 14px 0;
  font-size: 15px !important;
}
.window pre {
  padding: 16px;
}
#ty-tooltip,
.ty-tooltip.shown {
  padding: 6px 12px;
  background: var(--bg-color2);
  border-radius: 6px;
  color: var(--text-color);
}

/* content footer */
footer.ty-footer,
.ty-footer .footer-item {
  height: 24px;
  border-top: none;
}
.ty-footer .footer-item {
  margin-left: 3px;
  margin-top: -5px;
  border-radius: 5px;
  background: var(--border-color) !important;
  line-height: 24px;
}
.ty-footer #footer-word-count {
  margin-right: -2px;
}
.typora-sourceview-on #toggle-sourceview-btn {
  margin-left: 0;
}
#dict-install-dialog + div {
  bottom: 3px !important;
}
#footer-word-count-info {
  padding: 6px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
}
#footer-word-count-info table {
  border-radius: 0;
}
#footer-word-count-info table tr > td:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
#footer-word-count-info table tr > td:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.export-item.active,
.export-items-list-control {
  border-radius: 3px !important;
}
.nav-group-item {
  border-radius: 6px !important;
}
.input-group table,
.export-detail {
  border-radius: 6px !important;
}
.export-detail .file-input input {
  height: 30px !important;
  padding-left: 8px !important;
  border-color: var(--border-color) !important;
}
.search-input {
  padding: 6px 12px !important;
  border-color: var(--border-color) !important;
}
.label-input-group div {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.label-input-group div pre {
  border-radius: 6px !important;
  font-size: 14px !important;
}
.input-group-content {
  border-radius: 6px !important;
}
.input-group-content table {
  margin-top: 4px;
}
.label-hint svg {
  margin-right: 3px;
}
.export-detail .input-group-content > .row {
  margin-right: 16px;
}
.export-detail,
.export-item.active {
  color: var(--text-color) !important;
}
.export-item.active {
  color: var(--color-1) !important;
}
.md-show-hint::after {
  background: var(--bg-color2) !important;
  border-radius: 3px;
  box-shadow: 0 0 3px var(--color-1) !important;
}
/**
 * ---------------------------------
 * Control UI on Mac (optional)
 * ---------------------------------
*/
.sidebar-tab-btn {
  margin-top: 12px !important;
  color: var(--title-color);
  font-size: 16px !important;
  line-height: 20px !important;
  vertical-align: middle;
}
.sidebar-tab-btn:hover {
  color: var(--color-1);
}
.mac-os .ty-show-search .ty-tab-wrapper {
  border-bottom: 1px solid var(--border-color);
}
.mac-os #sidebar-search-btn span::before {
  font-size: 18px;
}
.mac-os #ty-sidebar-search-tabs input {
  top: 0;
  margin-right: 0;
  padding: 0;
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 0 !important;
  border-bottom-width: 1px;
}
.mac-os #ty-sidebar-search-tabs .searchpanel-search-option-btn {
  top: 14px;
}
.mac-os #ty-sidebar-search-tabs #ty-sidebar-search-back-btn {
  margin-top: 14px !important;
}
.mac-os #ty-sidebar-search-tabs .sidebar-tab-btn {
  width: 25px !important;
  padding-right: 8px;
}
.mac-os #ty-sidebar-search-tabs #filesearch-regexp-option-btn {
  right: 12px;
}
.mac-os #ty-sidebar-search-tabs #filesearch-word-option-btn {
  right: 35px;
}
.mac-os #ty-sidebar-search-tabs #filesearch-case-option-btn {
  right: 58px;
}
#ty-sidebar-footer .sidebar-footer-item {
  padding-top: 4px;
  padding-bottom: 4px;
}
.os-windows #ty-sidebar-footer .sidebar-footer-item {
  padding-top: 0;
  padding-bottom: 0;
}

#typora-quick-open {
  padding: 12px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.typora-quick-open-item,
.md-hover-tip .code-tooltip-content {
  border-radius: 5px;
  overflow-x: auto;
}
.code-tooltip.md-hover-tip,
.md-hover-tip .code-tooltip-content,
.md-arrow::after {
  border-bottom-color: var(--color-1) !important;
  background: var(--color-1) !important;
  box-shadow: 0 1px 4px var(--color-1) !important;
}
.md-hover-tip .code-tooltip-content:hover a {
  color: var(--color-2) !important;
}

/*
 * ------------------------
 * .ty-preferences
 * ------------------------
*/
.sidebar {
  position: relative;
}
.sidebar:after {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 100%;
  right: -24px;
  top: 0;
  border-left: 1px solid var(--border-color);
}

.ty-preferences a {
  font-size: 12px !important;
  text-decoration: none;
  color: var(--color-1);
}
.ty-preferences a:hover {
  text-decoration: underline;
  color: var(--color-2);
}

/*search style*/
#searchpanel-search-group .ty-search-panel-row {
  padding-top: 0;
}
#searchpanel-search-group .searchpanel-search-option-btn {
  top: 3px;
  background: var(--bg-color);
}
#searchpanel-search-group .searchpanel-search-option-btn:hover {
  color: var(--color-1);
}
.ty-search-panel-row .btn {
  line-height: 14px;
}
.ty-search-panel-row .ion-close-round,
.ty-search-panel-row .ty-upload {
  padding-right: 8px !important;
  padding-left: 4px !important;
}
#search-panel-next,
#search-panel-replace-btn {
  left: 3px;
}
#search-panel-replaceall-btn,
#search-panel-replace-btn {
  padding-right: 4px !important;
  padding-left: 4px !important;
  text-align: center !important;
}
.ty-on-outline-filter .ty-outline-hit {
  color: var(--color-2);
}
.md-search-hit {
  background: var(--color-2-0-c) !important;
  color: #070909 !important;
}
.md-search-select {
  background: var(--color-2) !important;
  color: #070909 !important;
}

/* md-notification-container */
.md-notification-container {
  padding-top: calc(var(--title-bar-height) + 10px) !important;
  background: var(--bg-color);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
  font-size: 14px;
}
.native-window.os-windows .md-notification-container,
.mac-os .md-notification-container {
  padding-top: 1px !important;
}
.md-notification-container #md-notification::before {
  top: 8px;
  font-size: 16px;
}
#md-notification .md-notification-content {
  padding-bottom: 4px;
}
#md-notification p {
  margin: 4px 0;
  white-space: nowrap;
}
#md-notification > p:last-of-type {
  margin-bottom: 8px;
}
#md-notification > p:only-of-type {
  margin-bottom: 0;
}
.md-notification-container .btn {
  margin: 0;
}
#md-notification .typora-search-spinner,
#md-notification .typora-export-spinner {
  top: 5px !important;
}
.unibody-window #md-searchpanel .btn {
  line-height: 24px !important;
}
#md-notification .typora-search-spinner > div,
#md-notification .typora-export-spinner > div {
  background: var(--color-1);
}

/* 打字机模式提示 */
#md-notification .ty-enter-mode-warning-body + div {
  display: flex;
  display: -webkit-flex;
}
#md-notification label {
  align-self: center;
}
#md-notification label > input {
  margin-top: 0;
}

/*
 * ------------------------
 * diagram
 * ------------------------
*/
.md-diagram .md-diagram-panel {
  border-radius: 8px;
  border-color: transparent !important;
  background: var(--bg-color2);
}
pre.md-focus .md-diagram-panel {
  margin-top: 4px;
}

/*
 * ------------------------
 * export html
 * ------------------------
*/
body.typora-export {
  padding: 0;
}
.typora-export code {
  padding: 2px 4px;
}
.typora-export .typora-export-content {
  display: flex;
  display: -webkit-flex;
  width: 100vw;
  max-width: 1920px;
  margin: 0 auto;
  justify-content: center;
}
.typora-export #write {
  margin: 0;
}

/* sidebar */
#typora-sidebar {
  border-right-color: var(--border-color);
}
.typora-export-sidebar {
  margin-right: 0;
  margin-top: 0;
}
.typora-export-sidebar > .outline-content {
  height: 100vh;
  border-right: 1px solid var(--border-color);
  padding-top: 14px;
  padding-bottom: 14px;
  overflow: auto;
}
.no-collapse-outline .typora-export-sidebar .outline-item-wrapper > ul li,
.typora-export-sidebar .outline-item-open > ul li {
  margin-left: 1px;
}
.typora-export-no-collapse-outline .outline-expander {
  display: none;
}
.typora-export-no-collapse-outline .outline-item-wrapper > .outline-children::before {
  content: '';
  position: absolute;
  left: -24px;
  top: -20px;
  width: 1px;
  height: calc(100% + 12px);
  background: transparent;
  border-left: 1px solid var(--border-color);
}
.typora-export-no-collapse-outline .outline-content li ul {
  margin-left: 21px;
}
.typora-export-no-collapse-outline .outline-item-wrapper:last-of-type > .outline-children::before,
.typora-export-no-collapse-outline .outline-children > li.outline-item-wrapper:last-child > .outline-children::before {
  display: none;
}
.typora-export-no-collapse-outline .outline-children > li:first-child > .outline-item::before,
.typora-export-no-collapse-outline .outline-content > li:nth-child(2) > .outline-item::before {
  top: -9px;
  height: calc(50% + 9px);
}
.typora-export-no-collapse-outline .outline-content > li.outline-item-wrapper:first-child > .outline-children::before {
  top: -15px;
}
.typora-export .outline-expander::before,
.typora-export .outline-expander:hover::before,
.no-collapse-outline .typora-export .outline-item-wrapper > .outline-item > .outline-expander::before,
.typora-export .outline-item-open > .outline-item-wrapper > .outline-expander::before {
  content: "" !important;
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  border-top: 1.5px solid var(--text-color);
  border-right: 1.5px solid var(--text-color);
  z-index: 50;
}
.typora-export .outline-item-wrapper > .outline-item > .outline-expander::before,
.typora-export .outline-item-wrapper:not(.outline-item-open) > .outline-item > .outline-expander::before {
  margin-top: 13px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
.typora-export .outline-expander:hover::before,
.typora-export .outline-item-wrapper:not(.outline-item-open) > .outline-item > .outline-expander:hover::before,
.typora-export .outline-item-open > .outline-item > .outline-expander::before {
  margin-left: 2px;
  margin-top: 11px;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
}
.typora-export .outline-expander:hover::before {
  margin-left: -2px;
}
.typora-export .outline-item:hover {
  margin-right: 0;
}
.typora-export .outline-item-active {
  background: transparent !important;
}
.typora-export .outline-item-active > .outline-item,
.typora-export .outline-item-active > .outline-item > .outline-label {
  background: var(--bg-color2) !important;
  color: var(--color-1);
}
.typora-export .outline-content li .outline-label {
  padding-left: 9px;
}
.typora-export li.outline-item-open > .outline-item > .outline-label,
.typora-export .outline-item-wrapper:not(.outline-item-open) > .outline-item > .outline-expander:hover + .outline-label {
  padding-left: 13px;
}
.typora-export-no-collapse-outline .outline-content li .outline-label {
  padding-left: 0 !important;
}
.typora-export .outline-item:hover .outline-label {
  color: var(--text-color);
}
.typora-export-sidebar .outline-content li > .outline-item:hover > .outline-expander::before {
  border-color: var(--text-color);
}
.typora-export-sidebar .outline-item-active > .outline-item > .outline-expander::before {
  border-width: 2px !important;
  border-color: var(--color-1);
}

/*
 * ------------------------
 * @media screen
 * ------------------------
*/
@media screen and (min-width: 1921px) {
  .typora-export-show-outline #write {
    max-width: 1312px;
    padding-right: 0;
  }
}

@media screen and (min-width: 1725px) {
  .typora-export .outline-content {
    padding-left: 5px;
  }
}

@media screen and (max-width: 1724px) {
  .typora-export-show-outline #write {
    max-width: 1672px;
  }
  #write,
  #typora-source .CodeMirror-lines,
  .typora-export-show-outline #write {
    padding: 32px 96px;
  }
  .typora-export-sidebar,
  .typora-export-sidebar > .outline-content {
    width: 280px;
  }
}

@media screen and (max-width: 1440px) {
  .typora-export-show-outline #write {
    max-width: 1620px;
  }
  #write,
  #typora-source .CodeMirror-lines,
  .typora-export-show-outline #write {
    padding: 32px 80px;
  }
  .typora-export-sidebar,
  .typora-export-sidebar > .outline-content {
    width: 260px;
  }
}

@media screen and (max-width: 1200px) {
  .typora-export-sidebar,
  .typora-export-sidebar > .outline-content {
    width: 240px;
  }
  #write,
  #typora-source .CodeMirror-lines,
  .typora-export-show-outline #write {
    padding: 32px 80px;
  }
}

@media screen and (max-width: 992px) {
  .typora-export-sidebar,
  .typora-export-sidebar > .outline-content {
    display: block !important;
  }
  #write,
  #typora-source .CodeMirror-lines,
  .typora-export-show-outline #write {
    padding: 32px 60px;
  }
}

@media screen and (max-width: 768px) {
  .typora-export-sidebar {
    display: none !important;
  }
  #write,
  .typora-export-show-outline #write {
    padding: 32px;
  }
  h1.md-focus::before,
  h2.md-focus::before,
  h3.md-focus::before,
  h4.md-focus::before,
  h5.md-focus::before,
  h6.md-focus::before,
  h1::before,
  h2::before,
  h3::before,
  h4::before,
  h5::before,
  h6::before {
    left: -30px;
  }
}

/*
 * ------------------------
 * @media print
 * ------------------------
*/
@media print {
  html,
  body,
  body #write,
  body content,
  body .typora-export-content {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; /*解决浏览器打印只有一页问题*/
    padding: 0 !important;
    border: none !important;
  }
  body .typora-export-sidebar {
    display: none !important;
    width: 0 !important;
  }
  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }
  body,
  body * {
    scrollbar-width: none !important;
  }
  table,
  pre,
  img,
  blockquote,
  section,
  .md-alert{
    page-break-inside: avoid;
  }
  h1, h2, h3, h4, h5, h6 {
    margin: 24pt 0 12pt;
  }
  h1 {
    font-size: 24pt;
  }
  h2 {
    font-size: 21pt;
  }
  h3 {
    font-size: 18pt;
  }
  h4 {
    font-size: 15pt;
  }
  h5 {
    font-size: 13.5pt;
  }
  h6 {
    font-size: 12pt;
  }
  p {
    font-size: 12pt;
    margin: 12pt 0;
  }

  @page {
    margin: 15mm !important;
    size: auto;
    /*谷歌浏览器打印设置*/
    @top-center {
      content: '';
      font-size: 9pt;
    }
    @bottom-center {
      content: counter(page) '/' counter(pages);
      font-size: 9pt;
    }
  }
}